<template>
  <div>
    <div class="card1">
      <div style="width:100%;background-color:#f2f2f2;height:42px;">
        <span style="margin-left:20px;line-height:42px;">事件分析</span>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="list-card">
          <h1 style="margin-top: 1px;">使用该模型已保存的图标</h1>
          <el-row>
            <li v-for="(item,index) in eventList" :key="index" class="list-title-li">
              <span class="list-title" @click="setCondition(item)">{{item.model_name}}<i
                  class="el-icon-close list-delete" @click="handleDelete(item)"></i></span>
            </li>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="20">
        <div class="index">
          <div style="margin-top: -19px">
            <h1 style="font-weight:600;">指标</h1>
            <div class="detail">
              <span>按</span>
              <span>
                <el-select v-model="value1" placeholder="请选择">
                  <el-option v-for="item in options1" :key="item.event_code" :label="item.event_name"
                    :value="item.event_code"></el-option>
                </el-select>
              </span>
              <span>的</span>
              <span>
                <el-select v-model="value2" placeholder="请选择">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </span>
              <el-button type="text" style="float: right;margin-top: -57px;" @click="openVisible"><img
                  src="@/assets/icon-save.png" class="save-icon" /><span
                  style="float: right;margin-top: 7px;margin-left: 4px;">保存</span></el-button>
            </div>
            <el-divider></el-divider>
            <h1 style="font-weight:600;">细分维度</h1>
            <div class="detail2" v-for="(options,index) in options3List" :key="index">
              <span>按</span>
              <span>
                <el-select v-model="value3List[index]" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
              </span>
              <span>
                查看
                <i class="el-icon-plus" style="margin-left:4px;" @click="addOption"></i>
                <i class="el-icon-minus" style="margin-left:4px;" @click="removeOption"></i>
              </span>
              <el-button style="width:68px;background-color:#3A4267;color:#fff;border-radius:40px;float:right"
                @click="eventAnalysis">
                查询</el-button>
            </div>
          </div>
        </div>
        <div style="margin:20px 0 0 0;padding:30px 40px 0 40px;background-color:#fff;height:560px">
          <div class="block" style="float:left;">
            <el-date-picker v-model="dateValue" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div style="float:right;">
            <el-radio-group v-model="radio" @change="changeTheme">
              <el-radio-button :label="1">
                <img :src="img4" style="width:12px;height:12px;" />
              </el-radio-button>
              <el-radio-button :label="2">
                <img :src="img5" style="width:12px;height:12px;" />
              </el-radio-button>
              <el-radio-button :label="3">
                <img :src="img6" style="width:12px;height:12px;" />
              </el-radio-button>
              <el-radio-button :label="4">
                <img :src="img7" style="width:12px;height:12px;" />
              </el-radio-button>
            </el-radio-group>
          </div>
          <div id="main" style="width: 1000px;height:400px;margin-top:10%;" v-loading="loading" />
        </div>
      </el-col>
    </el-row>
    <el-dialog title="保存图表" :visible.sync="saveVisible" width="30%">
      <span style="float:left;font-size:13px">图表名称</span>
      <el-input v-model="modelName" placeholder="请输入图表名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "ReportContent",
    props: {},
    data() {
      return {
        //主题切换
        radio: 1,
        img4: require("@/assets/broken.png"),
        img5: require("@/assets/block.png"),
        img6: require("@/assets/bar.png"),
        img7: require("@/assets/pie.png"),
        options1: [],
        value1: "",
        saveVisible: false,
        loading: false,
        modelName: '',
        options2: [{
            value: "人次",
            label: "总次数",
          },
          {
            value: "人数",
            label: "总人数",
          },
        ],
        value2: "人次",
        options3List: [],
        value3List: [],
        options3: [],
        value3: "",
        eventList: [], //事件分析接口1容器
        pickerOptions: {
          shortcuts: [{
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        dateValue: "",
        option: {
          //color: ["#48abfe", "#00d06e", "#3be294", "#ffdcba"],
          tooltip: {
            //trigger: "axis",
          },
          legend: {
            icon: "rect",
            itemWidth: 20,
            itemHeight: 6,
            bottom: "0%",
            data: [],
          },
          grid: {
            top: "10%",
            left: "3%",
            right: "4%",
            bottom: "25%",
            containLabel: true,
          },
          yAxis: [{
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} ",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#DDD",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            show: true,
          }, ],
          xAxis: [{
            type: "category",
            axisLabel: {
              interval: 'auto',
              //show: true,
              splitNumber: 15,
              textStyle: {
                fontSize: 12,
                color: "#656565",
              },
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            data: [],
          }, ],
          series: [

          ],
        },
        respdata: '',
        resdate: [],
      };
    },
    computed: {},
    created() {
      this.getList()
    },
    mounted() {
      this.getEventList();
      this.getAttributeList();
      this.initChart();
    },
    watch: {},
    methods: {
      eventAnalysis() {
        var params = {
          "eventCode": this.value1,
          "filterParameter": "[" + this.value3List + "]",
          "countType": this.value2,
          "dataValue": "",
          "startDate": this.dateValue[0],
          "endDate": this.dateValue[1]
        }
        if (this.value1 && this.dateValue) {
          this.loading = true
          this.$http.post("http://127.0.0.1:8080/userprofile-platform/v1/DataAnalysis/eventAnalysis",
            params
          ).then((res) => {
            if (res.data.code == 1) {
              console.log(res.data);
              if (res.data.flag == true) {
                this.respdata = res.data.data;
                this.changeTheme(this.radio);
                this.loading = false
              }
            } else {
              this.$message.error(res.data.msg)
              this.loading = false
            }
          });
        } else {
          this.$message.error('请填写指标/日期')
        }
      },
      getEventList() {
        this.$http
          .post(
            "http://127.0.0.1:8080/userprofile-platform/v1/DataAnalysis/eventList", {}
          )
          .then((res) => {
            if (res) {
              //console.log(res.data.data);
              this.options1 = res.data.data;
            }
          });
      },
      getAttributeList() {
        this.$http
          .post(
            "http://127.0.0.1:8080/userprofile-platform/v1/DataAnalysis/attributeList", {}
          )
          .then((res) => {
            if (res) {
              //console.log(res.data.data);
              {}
              var respdata = res.data.data;
              var option3 = [];
              for (var i = 0; i < respdata.length; i++) {
                var val = JSON.stringify({
                  type: respdata[i].property_type_code,
                  field: respdata[i].property_code,
                  name: respdata[i].property_name
                })
                option3.push({
                  value: val,
                  name: respdata[i].property_name
                });
              }
              this.options3 = option3;
              this.addOption();
              console.log(this.options3, 3)
            }
          });
      },
      addOption() {
        this.options3List.push(this.options3);
        this.value3List.push("");
        console.log(this.value3List, 1)
      },
      removeOption() {
        if (this.options3List.length > 1) {
          this.options3List.pop();
          this.value3List.pop();
        }
      },
      handleClick() {
        alert("button click");
      },
      //切换主题
      changeTheme(val) {
        let colorList = ['#92F1A3', '#EFF18D', '#97E8F0', '#8298F2', '#ECF18D', '#E897A9', '#E193CE', '#96D7E0',
          '#F0F8F9', '#E2796D'
        ]
        if (val == 1) { //折线图
          var detailData = this.respdata.detailList;
          var seriesData = [];
          var legendData = [];
          for (var i = 0; i < detailData.length; i++) {
            seriesData.push({
              name: detailData[i].legend,
              type: "line",
              data: detailData[i].value,
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: colorList[i],
                  lineStyle: {
                    color: colorList[i]
                  }
                }
              },
            });
            legendData.push(detailData[i].legend)
          }
          this.option.xAxis[0].data = this.respdata.dateList;
          this.option.xAxis[0].show = true;
          this.option.legend.data = legendData;
          this.option.grid.bottom = '13%'
          this.option.grid.containLabel = true
          this.option.xAxis[0].axisLabel = {
            interval: 0,
            rotate: 0
          }
          this.option.series = seriesData;
        } else if (val == 2) { //面积图
          var detailData = this.respdata.detailList;
          let dateList = this.respdata.dateList
          var series = [];
          var legendData = [];
          var xAxis = []
          let shadowList1 = ['#E1FBE6', '#FAFBD9', '#13D0D2', '#0092F1', '#F8FACF', '#F5D6DD', '#F1CDE9', '#E1F4F7',
            '#FBFDFD', '#F0B9B3'
          ]
          let shadowList2 = ['#1AD96F', '#FFD37E', '#13D0D2', '#0092F1', '#FEDC00', '#FE5377', '#C333ED', '#16D2AF',
            '#D4E4F8', '#7F3D2D'
          ]
          for (let item of dateList) {
            xAxis.push(item)
          }
          for (var i = 0; i < detailData.length; i++) {
            legendData.push(detailData[i].legend)
            let seriesData = [];
            for (let j = 0; j < detailData[i].value.length; j++) {
              seriesData.push(parseInt(detailData[i].value[j]))
            }
            let color = []
            series.push({
              name: detailData[i].legend,
              type: "line",
              symbolSize: 5,
              stack: '总量',
              areaStyle: {
                normal: {
                  color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: shadowList1[i],
                    }, {
                      offset: 1,
                      color: shadowList2[i]
                    }],
                    globalCoord: false
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: colorList[i],
                  lineStyle: {
                    color: colorList[i],
                  }
                }
              },
              data: seriesData,
              smooth: true
            });
            seriesData = []
          }
          this.option.xAxis[0].data = Array.from(new Set(xAxis));
          this.option.xAxis[0].show = true;
          this.option.xAxis[0].axisLabel = {
            interval: 0,
            rotate: 0
          }
          this.option.legend.data = Array.from((legendData));
          this.option.grid.bottom = '13%'
          this.option.grid.containLabel = true
          this.option.series = series;
        } else if (val == 3) { //柱形图
          var detailData = this.respdata.detailList;
          var seriesData = [];
          var xAxisData = [];
          var seriesData0 = [];
          for (var i = 0; i < detailData.length; i++) {
            xAxisData.push(detailData[i].legend);
            seriesData0.push(detailData[i].total)
          }
          seriesData.push({
            name: 'total',
            type: "bar",
            data: seriesData0,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                }
              }
            },
          });
          this.option.xAxis[0].data = xAxisData;
          this.option.xAxis[0].axisLabel = {
            interval: 0,
            rotate: 45
          }
          this.option.xAxis[0].show = true;
          this.option.legend.data = [];
          this.option.series = seriesData;
        } else if (val == 4) { //饼图
          var detailData = this.respdata.detailList;
          var seriesData = [];
          var legendData = [];
          var seriesData0 = [];
          for (var i = 0; i < detailData.length; i++) {
            legendData.push(detailData[i].legend);
            seriesData0.push({
              value: detailData[i].total,
              name: detailData[i].legend,
              itemStyle: {
                color: colorList[i]
              }
            })
          }
          seriesData.push({
            name: 'total',
            type: "pie",
            radius: ['50%', '70%'],
            data: seriesData0,
          });
          this.option.xAxis[0].show = false;
          this.option.legend.data = [];
          this.option.series = seriesData;
        }
        this.chart.setOption(this.option, true);

      },
      initChart() {
        // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
        this.chart = echarts.init(document.getElementById("main"));
        // this.chart = echarts.init(this.$el)

        // 使用刚指定的配置项和数据显示图表。
        this.chart.setOption(this.option);
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      },
      //获取事件分析列表
      getList() {
        this.$http.post("http://127.0.0.1:8080/userprofile-platform/v1/modelList/listEventModel", {}).then(res => {
          if (res.data.flag && res.data.code == 1) {
            this.eventList = res.data.data.list
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      //打开判断
      openVisible() {
        if (this.value1) {
          this.saveVisible = true
        } else {
          this.$message.error('请选择指标')
        }
      },
      //保存
      handleSave() {
        console.log(this.options3List)
        let params = {
          "eventCode": this.value1,
          "filterParameter": "[" + this.value3List + "]",
          "countType": this.value2,
          "dataValue": "",
          "startDate": this.dateValue[0],
          "endDate": this.dateValue[1],
          "modelName": this.modelName
        }
        this.$http.post("http://127.0.0.1:8080/userprofile-platform/v1/modelList/eventAnalysisModel", params).then(res => {
          if (res.data.code == 100) {
            this.$message.success(res.data.msg)
            this.saveVisible = false
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      //删除
      handleDelete(item) {
        this.$confirm('确认删除此条数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const URL = "http://127.0.0.1:8080/userprofile-platform/v1/modelList/deleteEventModel?modelId=" + item.model_id
          this.$http.post(URL, {}).then(res => {
            if (res.data.code == 100) {
              this.$message.success(res.data.msg)
              this.getList()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {

        })
      },
      //生成查询条件
      setCondition(data) {
        this.options3List = []
        this.value3List = []
        this.value1 = data.event_code
        let arr = JSON.parse(data.filter_parameter)
        this.value3List.shift()
        this.options3List.shift()
        for (let i = 0; i < arr.length; i++) {
          this.options3List.push(this.options3)
          this.value3List.push(JSON.stringify(arr[i]))
        }
      },
      getRowClass({
        rowIndex
      }) {
        if (rowIndex == 0) {
          return "background:RGB(254,242,234)";
        } else {
          return "";
        }
      },
    },
    destroyed() {},
  };

</script>

<style scoped>
  .card1 {
    text-align: left;
    font-size: 18px;
  }

  .index {
    min-height: 200px;
    padding: 20px;
    background-color: #fff;
    color: #303133;
    text-align: left;
  }

  .detail {
    padding: 30px 0;
  }

  .detail2 {
    padding: 10px 0 0 0;
  }

  .el-divider--horizontal {
    margin: 0;
    margin-bottom: 20px;
  }

  .card {
    padding: 30px 20px 20px 20px;
    background-color: #fff;
    color: #303133;
    text-align: left;
    font-size: 18px;
    border-right: 1px solid #f7f8fa;
  }

  .imgr {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    float: right;
    margin-top: 3px;
  }

  .list-card {
    height: 890px;
  }

  .list-title-li {
    list-style: none;
    text-align: left;
    margin-top: 10px;
  }

  .list-title {
    margin-left: 10px;
    color: #999;
    cursor: pointer;
  }

  .list-delete {
    float: right;
    margin-top: 3px;
    font-size: 17px;
    color: black;
    font-weight: 800;
    cursor: pointer;
  }

  .save-icon {
    width: 27px;
    height: 27px;
  }

  .el-dialog__wrapper /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    float: left;
  }

  .el-dialog__wrapper /deep/ .el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 15px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
  }

</style>
